<template>
    <div class="testProgressList">
      <div class="testProgressList-row" :key="item.index" v-for="item in items">
        <div class="testProgressList-row-title">
          <span>第</span> {{item.index}} <span>题</span>
        </div>
        <div class="testProgressList-row-content">
          <i-progress  :num="item.num"></i-progress>
        </div>
      </div>
    </div>
</template>

<script>
  import progress from '../../components/progress'

  export default {
    name: 'testProgressList',
    data () {
      return {
        items: [{
          index: 15,
          num: 4
        }, {
          index: 20,
          num: 20
        }, {
          index: 38,
          num: 15
        }, {
          index: 40,
          num: 70
        }]
      }
    },
    components: {
      'i-progress': progress
    }
  }
</script>

<style scoped>
  .testProgressList {
    width: 100%;
  }

  .testProgressList-row {
    width: 100%;
    height: 60rpx;
    display: flex;
    line-height: 60rpx;
  }

  .testProgressList-row-title {
    width: 130rpx;
    flex-shrink: 1;
    line-height: 36rpx;
  }

  .testProgressList-row-content {
    flex: 1;
    line-height: 36rpx;
    margin-left: 20rpx;
  }
</style>
